<template>
  <div>
    <!--left!-->
    <div class="me_left">
      <!--left_top!-->
      <div class="me_left_top">
        <img src="https://file.mbadashi.com/system/config/default_head.png" alt="头僝" class="head-img">
        <h5 class="nick-name">U1188797</h5>
        <p class="user-id">ID：1188797</p>
        <div class="member-modal">
          <!---->
        </div>
      </div>
      <!--left_bottom!-->
      <div class="me_left_bottom">
        <el-tabs :tab-position="tabPosition" style="height: 400px;width: 300px;">
            <el-tab-pane label="个人中心">个人中心</el-tab-pane>
            <el-tab-pane label="我的优惠券">我的优惠券</el-tab-pane>
            <el-tab-pane label="我的订单">我的订单</el-tab-pane>
            <el-tab-pane label="会员中心">会员中心</el-tab-pane>
            <el-tab-pane label="学习提醒">学习提醒</el-tab-pane>
          </el-tabs>
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    name: "me",
    components: {

    },
    data() {
      return {
        tabPosition: 'left'

      }
    }

  }
</script>
<style scoped>
  .me_left{
/*    background-color: #0000FF; */
    margin-left: 200px;
    border: 1px solid black;
    margin-right: 200px;
  }
.me_left_top{
/*  background-color: #4169E1; */
  padding-bottom: 50px;
  border-right: 1px solid rosybrown;;
/*  border: 1px solid rosybrown; */
  width: 110px;
}
.member-modal{
  border: 1px solid black;
  margin-top: 50px;
}

.me_left_bottom{

}
.head-img{
  width: 100px;
  border-radius: 50%;
}
</style>
